<template>
  <!-- 出库弹窗 start-->
  <el-dialog
    :title="$t('order.component.applyGoods')"
    :visible.sync="outStockDialog"
    width="390px"
    :close-on-click-modal="false"
  >
    <div class="goods-dialog-box">
      <div class="oddnum-box">
        <div class="mar-b-12">{{$t('common.base.remark')}}</div>
        <!-- <el-input v-model="remark" type="textarea" maxlength="500" placeholder="请输入"></el-input> -->
        <biz-at-textarea class="biz-at-textarea" ref="atTextarea" search-url="/message/user/lists" name-key="displayName" v-model="remark" :at-users.sync="atUsers" direction="bottom">
          <template slot="item" slot-scope="item">
            <img :src="head(item.user.head)">
            <span>{{item.user.displayName}}</span>
          </template>
          <textarea ref="editor" class="base-at-textarea" @input="inputContent" :placeholder="$t('order.placeHolder.enterCanAt')" maxlength="500" :rows="4"></textarea>
        </biz-at-textarea>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="ghost" @click="changeDialog(false)">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="confirm" :loading="loading">{{$t('common.base.makeSure')}}</el-button>
    </div>
  </el-dialog>
  <!-- 发货弹窗 end-->
</template>
<script>
import { repertoryOut } from "@src/api/LinkcApi";
import { getOssUrl } from '@src/util/assets'
import {enCodeAtText, getReceivers} from '@src/util/atText'
import { cutAtTextContent } from 'pub-bbx-utils'
import { useTenantId, useRootUser } from '@hooks/useRootWindow.ts';

const defaultAvatar = getOssUrl('/avatar.png')

export default {
  name: "out-stock-dialog",
  props: {
    infoData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      outStockDialog: false,
      remark: "",
      loading: false,
      atUsers: []
    };
  },

  watch: {
    outStockDialog() {
      this.remark = "";
      this.atUsers = []
    },
  },
  methods: {
    confirm() {
      this.loading = true;
      let receivers = ''
      let query = ''
      let remark = this.remark
      if(this.remark){
        remark = enCodeAtText(this.remark, this.atUsers);
        receivers = getReceivers(this.remark, this.atUsers)
        let queryData = {
          receivers,
          tenantId: useTenantId().value,
          content: cutAtTextContent(this.remark),
          sendUserName: useRootUser().value?.displayName,
          bizId: this.infoData.orderId,
          bizNo: this.infoData.orderNum,
        };
        query = '?';
        for (let i in queryData) {
          query += `&${i}=${queryData[i]}`;
        }
      }
      repertoryOut({
        orderId: this.infoData.orderId,
        remark: remark,
      },query)
        .then((res) => {
          if (res.status == 200) {
            this.changeDialog(false);
            this.$message.success(res.data);
            this.$emit("confirm");
          } else {
            this.$notify.close();
            this.$notify.error({
              title: this.$t('common.base.tip.httpIsError'),
              message: res.message,
              duration: 2000,
            });
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    changeDialog(e) {
      this.outStockDialog = e;
    },
    head(src) {
      if (!src) return defaultAvatar
      return src
    },
    inputContent(event){
      let value = event.target.value;
      this.remark = value;
    },
  },
};
</script>
<style lang="scss" scoped>
.goods-dialog-box {
  max-height: 450px;
  overflow-y: scroll;
  .oddnum-box {
    padding: 16px 20px;
  }
}
</style>
<style lang="scss">
.el-dialog__body {
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  padding: 0;
}
</style>